<template>
  <section class="component view-attach-list">
    <data-box :data="fileDataSet">
      <template slot="columns">
        <el-table-column prop="originalName" label="文件名称" :min-width="$helper.getColumnWidth(8)"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="$common.downloadFile(scope.row.url,scope.row.originalName)">下载</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>


<script lang="ts">
import Vue from "vue";
import { Prop, Emit, Watch } from "vue-property-decorator";
import Component from "vue-class-component";
import DataBox from '~/components/common/data-box.vue';
import { FileUploadService } from "~/services/file-service/file-upload.service"
import { Dependencies } from '~/core/decorator';

@Component({
  components: {
    DataBox
  }
})
export default class ViewAttachList extends Vue {
  @Dependencies(FileUploadService) private fileUploadService: FileUploadService;
  // 附件列表
  @Prop({
    required: true,
    type: String
  })
  private fileIds: string;
  private fileDataSet: any = []

  @Emit("close")
  private emitClose() { }

  @Watch("fileIds", { immediate: true })
  private onfileIdsChange(val) {
    this.fileDataSet = []
    if (val) this.fileUploadService.getAllUploadFileByIds(val).subscribe(data => this.fileDataSet = data)
  }
}
</script>
